<!doctype html>
<!-- The DOCTYPE declaration above will set the    -->
<!-- browser's rendering engine into               -->
<!-- "Standards Mode". Replacing this declaration  -->
<!-- with a "Quirks Mode" doctype may lead to some -->
<!-- differences in layout.                        -->

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--                                                               -->
    <!-- Consider inlining CSS to reduce the number of requested files -->
    <!--                                                               -->
    <link type="text/css" rel="stylesheet" href="Zoologico.css">

    <!--                                           -->
    <!-- Any title is fine                         -->
    <!--                                           -->
    <title>Nathy's Zoo</title>
    
    <!--                                           -->
    <!-- This script loads your compiled module.   -->
    <!-- If you add any GWT meta tags, they must   -->
    <!-- be added before this line.                -->
    <!--                                           -->
    <script type="text/javascript" language="javascript" src="zoologico/zoologico.nocache.js"></script>
  </head>

  <!--                                           -->
  <!-- The body can have arbitrary html, or      -->
  <!-- you can leave the body empty if you want  -->
  <!-- to create a completely dynamic UI.        -->
  <!--                                           -->
  <body>

    <!-- OPTIONAL: include this if you want history support -->
    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
    
    <!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
    <noscript>
      <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
        Your web browser must have JavaScript enabled
        in order for this application to display correctly.
      </div>
    </noscript>
    
    <div id="login" class="show">
    		<h1>Zoo World! - Login</h1>
    		<h2>Por favor, aguarde enquanto o programa está sendo carregado...</h2>
    </div>

    <div id="jogo" class="hide">
    
    	<div id="painel-atributos"></div>
    
	    <h1>Zoo World!</h1>
	
		<div id="menu">
			<ul>
				<li id="criar-habitat"></li>
				<li id="excluir-habitat"></li>
				<li id="criar-animal"></li>
				<li id="excluir-animal"></li>
				<li id="mover-animal"></li>
				<li id="comprar-animal"></li>
				<li id="vender-animal"></li>
				<li id="tirar-animal-venda"></li>
			</ul>
		</div>
	
	    <div id="zoo-grid" >
			<div id="cell-00" class="animal-container">
				celula 00
			</div>
			<div id="cell-01" class="animal-container">
				celula 01
			</div>
			<div id="cell-02" class="animal-container">
				celula 02
			</div>
			<div id="cell-03" class="animal-container">
				celula 03
			</div>
			<div id="cell-04" class="animal-container">
				celula 04
			</div>
			<div id="cell-10" class="animal-container">
				celula 10
			</div>
			<div id="cell-11" class="animal-container">
				celula 11
			</div>
			<div id="cell-12" class="animal-container">
				celula 12
			</div>
			<div id="cell-13" class="animal-container">
				celula 13
			</div>
			<div id="cell-14" class="animal-container">
				celula 14
			</div>
			<div id="cell-20" class="animal-container">
				celula 20
			</div>
			<div id="cell-21" class="animal-container">
				celula 21
			</div>
			<div id="cell-22" class="animal-container">
				celula 22
			</div>
			<div id="cell-23" class="animal-container">
				celula 23
			</div>
			<div id="cell-24" class="animal-container">
				celula 24
			</div>
			<div id="cell-30" class="animal-container">
				celula 30
			</div>
			<div id="cell-31" class="animal-container">
				celula 31
			</div>
			<div id="cell-32" class="animal-container">
				celula 32
			</div>
			<div id="cell-33" class="animal-container">
				celula 33
			</div>
			<div id="cell-34" class="animal-container">
				celula 34
			</div>
			<div id="cell-40" class="animal-container">
				celula 40
			</div>
			<div id="cell-41" class="animal-container">
				celula 41
			</div>
			<div id="cell-42" class="animal-container">
				celula 42
			</div>
			<div id="cell-43" class="animal-container">
				celula 43
			</div>
			<div id="cell-44" class="animal-container">
				celula 44
			</div>
		</div>
	
	</div>
	
  </body>
</html>
